<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">企业名称：</div>
      <el-input v-model.trim="query.name" clearable placeholder="请输入内容" class="search-main" />
      <el-button type="primary" @click="doSearch">查询</el-button>
    </div>
    <div class="create-container">
      <el-button type="primary" @click="$router.push('/enterpriseAdd')">添加企业</el-button>
    </div>
    <!-- 表格区域 -->
    <div v-loading="loading" class="table">
      <el-table style="width: 100%" :data="list" @expand-change="onExpandChange">
        <el-table-column type="expand">
          <template #default="{ row }">
            <el-table v-loading="row.isLoading" :data="row.rentList">
              <el-table-column label="租赁楼宇" width="320" prop="buildingName" />
              <el-table-column label="租赁起始时间" prop="startTime" />
              <el-table-column label="合同状态" prop="status">
                <template #default="{ row: childRow }">
                  <!-- info: 已退租 -->
                  <!-- primary：待生效 -->
                  <!-- success: 生效中 -->
                  <el-tag :type="getStatusInfo(childRow.status).type">{{ getStatusInfo(childRow.status).text }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template #default="{ row: childRow }">
                  <!-- 按钮状态 -->
                  <!-- 不能续租：待生效（0） 已退租（3） -->
                  <!-- 不能删除：待生效（0） 生效中（1） -->
                  <!-- 不能退租：已退租（3） -->
                  <el-button size="mini" type="text" :disabled="[0, 3].includes(childRow.status)" @click="$refs.contractDialog.openEditDialog(row.id)">续租</el-button>
                  <el-button size="mini" type="text" :disabled="[3].includes(childRow.status)">退租</el-button>
                  <el-button size="mini" type="text" :disabled="[0, 1].includes(childRow.status)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" />
        <el-table-column label="企业名称" width="320" prop="name" />
        <el-table-column label="联系人" prop="contact" />
        <el-table-column
          label="联系电话"
          prop="contactNumber"
        />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button size="mini" type="text" @click="$refs.contractDialog.openAddDialog()">添加合同</el-button>
            <el-button size="mini" type="text">查看</el-button>
            <el-button size="mini" type="text" @click="$router.push('/enterpriseAdd?id=' + row.id)">编辑</el-button>
            <el-button size="mini" type="text" @click="deleteItem(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-container">
      <el-pagination
        :total="total"
        :page-size="query.pageSize"
        :current-page="query.page"
        layout="total, prev, pager, next"
        @current-change="onCurrentChange"
      />
    </div>
    <!-- 弹框：处理新增和编辑合同 -->
    <upsertContract ref="contractDialog" />
  </div>
</template>

<script>
import {
  getPartEnterpriseListAPI,
  deletePartEnterpriseAPI,
  getEnterpriseRentListAPI
} from '@/api/enterprise'
import upsertContract from './upsert-contract.vue'

export default {
  components: {
    upsertContract
  },
  data() {
    return {
      loading: false,
      list: [],
      // 查询参数
      query: {
        page: 1,
        pageSize: 2,
        // 查询关键字：企业名称 ==> 非必须
        name: null
      },
      total: 0
    }
  },
  created() {
    this.getListData()
  },
  methods: {
    async getListData() {
      this.loading = true
      const res = await getPartEnterpriseListAPI(this.query)
      this.loading = false
      // 在对 list 赋值之前进行处理 ==> 可以让新增的字段也变成响应式
      res.data.rows.forEach(item => {
        // 当前企业的合同列表是否在加载中
        item.isLoading = false
        // 当前企业的合同列列表，默认空
        item.rentList = []
      })
      this.list = res.data.rows
      this.total = res.data.total
    },
    onCurrentChange(page) {
      this.query.page = page
      this.getListData()
    },
    // 执行搜索
    doSearch() {
      // 搜索一定要从第一页开始
      this.query.page = 1
      this.getListData()
    },
    // 删除企业
    deleteItem(id) {
      this.$confirm('此操作将永久删除企业吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 1. 调接口
          // 2. 提示用户
          // 3. 重新渲染当前页（如果当前页有且只有一条数据，那么要渲染上一页）
          return deletePartEnterpriseAPI(id)
        })
        .then(() => {
          this.$message.success('删除成功')
          // todo: 可以加一个判断，判断是否需为当前页的唯一一条数据，如果是，那么页码要--，如果已经是第一页了，就不能--了
          if (this.list.length === 1 && this.query.page > 1) {
            this.query.page--
          }
          // 重新渲染
          this.getListData()
        })
        .catch(() => {})
    },
    // 当行被展开会关闭的时候调用
    // expandRows: 所有被展开的行对象组成的数组
    // row: 当前正在操作的行对象
    async onExpandChange(row, expandRows = []) {
      console.log(row, expandRows)
      // 1. 判断当前是展开还是合上
      if (!expandRows.includes(row)) {
        return
      }
      // 调接口，渲染子表格
      row.isLoading = true
      const res = await getEnterpriseRentListAPI(row.id)
      // eslint-disable-next-line require-atomic-updates
      row.isLoading = false
      // console.log(res)
      // 2.将数据进行赋值 ==> 渲染
      // eslint-disable-next-line require-atomic-updates
      row.rentList = res.data // 就是合同列表
    },
    // 基于status枚举值，生产 type 和 文本
    // 0待生效1生效中2已到期3已退租
    getStatusInfo(statusVal = 0) {
      const mapStatus = {
        0: { type: 'primary', text: '待生效' },
        1: { type: 'success', text: '生效中' },
        2: { type: 'warning', text: '已过期' },
        3: { type: 'info', text: '已退租' }
      }
      return mapStatus[statusVal]
    }
  }
}
</script>

<style lang="scss" scoped>
.department-container {
  padding: 10px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  ;
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
.create-container{
  margin: 10px 0px;
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
.form-container{
  padding:0px 80px;
}
</style>
